import 'package:flutter/material.dart';
import 'package:flutter_web_study/page/weight/select_widget.dart';
import 'package:flutter_web_study/page/weight/text_field_input_widget.dart';
import 'package:flutter_web_study/provider/base_provider.dart';
import 'package:flutter_web_study/router/application.dart';
import 'package:flutter_web_study/router/routes.dart';
import 'package:flutter_web_study/view_model/new_shop_view_model.dart';
import 'package:provider/provider.dart';

import '../api/app_config.dart';
import '../bean/menu_item.dart';

///@Description 新建商品
///@systemUser HXC182
///@Author Nine Tailed Fox
///@Date 2023/2/1 16:06
class NewShopPage extends StatelessWidget {
  String? jsonBean;

  NewShopPage({Key? key, this.jsonBean}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ProviderWidget<NewShopViewModel>(
      model: NewShopViewModel(context, jsonBean),
      onModelReady: (value) {
        value.initView();
      },
      builder: (BuildContext context, viewModel, Widget? child) {
        return Scaffold(
          appBar: AppBar(
            title: Text("添加商品"),
          ),
          body: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                item5Widget("品牌:    ", viewModel),
                item6Widget("系列名称:", viewModel),
                item7Widget("色号名称:", viewModel),
                Container(
                  padding: EdgeInsets.only(left: 10, top: 10, bottom: 10),
                  child: Row(
                    children: [
                      Text("商品分类:"),
                      SelectWidget(
                          items: brandTypeList,
                          value: viewModel.menuItemBean.label,
                          valueChanged: (value) =>
                              viewModel.getMenuItemBean(value))
                    ],
                  ),
                ),
                item2Widget("商品主图:", viewModel),
                item2Widget("衍生图:", viewModel),
                item3Widget("净含量:  ", viewModel.textEditingController7),
                item3Widget("价格:    ", viewModel.textEditingController8),
                item4Widget("功效:  ", 1),
                item4Widget("商品标签:  ", 2),
                item3Widget("产地:    ", viewModel.textEditingController9),
                item3Widget("成分:    ", viewModel.textEditingController13),
                item3Widget("评分:    ", viewModel.textEditingController10),
                item3Widget("化妆品备案编号:", viewModel.textEditingController11),
                Row(
                  children: [
                    item3Widget("关联商品:", viewModel.textEditingController12),
                    MaterialButton(
                      textColor: Colors.white,
                      color: Colors.blue,
                      onPressed: () => viewModel.getRelationShopDialog(),
                      child: Text("添加商品关联"),
                    ),
                  ],
                ),
                ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.vertical,
                    itemCount: viewModel.relationShop.length,
                    itemBuilder: (context, index) {
                      var item = viewModel.relationShop[index];
                      print(
                          "=====${AppConfig.IMAGE_PREFIX + item["imageList"][0]}");
                      return Row(
                        children: [
                          (item["imageList"] as List).length > 0
                              ? Container(
                                  margin: EdgeInsets.all(5),
                                  width: 100,
                                  height: 100,
                                  child: Image.network(AppConfig.IMAGE_PREFIX +
                                      item["imageList"][0]),
                                )
                              : Container(),
                          Text(item["brandName"]),
                          IconButton(
                              onPressed: () {
                                viewModel.relationShopDelete(item);
                              },
                              icon: Icon(Icons.dangerous)),
                        ],
                      );
                    }),
                Container(
                  height: 500,
                )
              ],
            ),
          ),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: FloatingActionButton(
            onPressed: () => viewModel.saveShop(context),
            child: Column(
              children: [
                Icon(Icons.save),
                Text(
                  "保存",
                  style: TextStyle(color: Colors.white),
                )
              ],
            ),
          ),
        );
      },
    );
  }

  Widget itemWidget(String value, var controller1, var controller2) {
    return Row(
      children: [
        SizedBox(width: 10),
        Text(value),
        TextFieldInputWidget(
          hitTextStr: '请输入中文名称',
          controller: controller1,
        ),
        TextFieldInputWidget(
          hitTextStr: '请输入英文名称',
          controller: controller2,
        ),
      ],
    );
  }

  Widget item5Widget(String value, NewShopViewModel viewModel) {
    return Row(
      children: [
        SizedBox(width: 10),
        Text(value),
        GestureDetector(
          child: Container(
            alignment: Alignment.centerLeft,
            height: 50,
            width: 200,
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.black12),
                borderRadius: BorderRadius.all(Radius.circular(3))),
            child: Text(viewModel.textEditingController1.text.isEmpty
                ? "请输入中文名称"
                : viewModel.textEditingController1.text),
          ),
          onTap: viewModel.jumpSearchPage,
        ),
        TextFieldInputWidget(
          hitTextStr: '请输入英文名称',
          controller: viewModel.textEditingController2,
        ),
      ],
    );
  }

  Widget item6Widget(String value, NewShopViewModel viewModel) {
    return Row(
      children: [
        SizedBox(width: 10),
        Text(value),
        GestureDetector(
          child: Container(
            alignment: Alignment.centerLeft,
            height: 50,
            width: 200,
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.black12),
                borderRadius: BorderRadius.all(Radius.circular(3))),
            child: Text(viewModel.textEditingController3.text.isEmpty
                ? "请输入中文名称"
                : viewModel.textEditingController3.text),
          ),
          onTap: viewModel.jumpSearch2Page,
        ),
        TextFieldInputWidget(
          hitTextStr: '请输入英文名称',
          controller: viewModel.textEditingController4,
        ),
      ],
    );
  }

  Widget item7Widget(String value, NewShopViewModel viewModel) {
    return Row(
      children: [
        SizedBox(width: 10),
        Text(value),
        GestureDetector(
          child: Container(
            alignment: Alignment.centerLeft,
            height: 50,
            width: 200,
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.black12),
                borderRadius: BorderRadius.all(Radius.circular(3))),
            child: Text(viewModel.textEditingController5.text.isEmpty
                ? "请输入中文名称"
                : viewModel.textEditingController5.text),
          ),
          onTap: viewModel.jumpSearch3Page,
        ),
        TextFieldInputWidget(
          hitTextStr: '请输入英文名称',
          controller: viewModel.textEditingController6,
        ),
      ],
    );
  }

  Widget item2Widget(String value, NewShopViewModel viewModel) {
    return Column(
      children: [
        Row(
          children: [
            SizedBox(width: 10),
            Text(value),
            Container(
              height: 110,
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: viewModel.getImageList(value).length,
                  itemBuilder: (context, index) {
                    return Stack(
                      children: [
                        Container(
                          margin: EdgeInsets.all(5),
                          width: 100,
                          height: 100,
                          color: Colors.black,
                          child: Image.network(AppConfig.IMAGE_PREFIX +
                              viewModel.getImageList(value)[index]),
                        ),
                        Positioned(
                            child: IconButton(
                          icon: Icon(
                            Icons.dangerous,
                            color: Colors.blue,
                          ),
                          onPressed: () {
                            viewModel.deleteImageList(index, value);
                          },
                        ))
                      ],
                    );
                  }),
            ),
            IconButton(
                onPressed: () => viewModel.getLostData(value),
                color: Colors.red,
                icon: Icon(Icons.add)),
          ],
        ),
      ],
    );
  }

  Widget item3Widget(String value, var controller1) {
    return Row(
      children: [
        SizedBox(width: 10),
        Text(value),
        TextFieldInputWidget(
          hitTextStr: '请输入内容',
          controller: controller1,
        ),
      ],
    );
  }

  Widget item4Widget(String vlaue, int tag) {
    return Consumer<NewShopViewModel>(
      builder: (context, viewModel, child) {
        return Column(
          children: [
            Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  Text(vlaue),
                  SizedBox(width: 10),
                  MaterialButton(
                    textColor: Colors.white,
                    color: Colors.blue,
                    onPressed: () {
                      viewModel.tagSwitch(tag);
                    },
                    child: Text("选择标签"),
                  ),
                  SizedBox(width: 10),
                  MaterialButton(
                    textColor: Colors.white,
                    color: Colors.blue,
                    onPressed: () {
                      viewModel.addTagSwitch(tag);
                    },
                    child: Text("添加标签"),
                  )
                ],
              ),
            ),
            Container(
              alignment: Alignment.centerLeft,
              height: 50,
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: tag == 1
                      ? viewModel.effectList.length
                      : viewModel.shopTagList.length,
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    var itemStr = tag == 1
                        ? viewModel.effectList[index]
                        : viewModel.shopTagList[index];
                    return Container(
                      margin: EdgeInsets.all(4),
                      color: Colors.blueAccent,
                      padding: EdgeInsets.all(8),
                      child: Row(
                        children: [
                          Text(itemStr,
                              style:
                                  TextStyle(color: Colors.white, fontSize: 16)),
                          GestureDetector(
                            child: Icon(Icons.dangerous_outlined),
                            onTap: () {
                              viewModel.deleteLabe(tag == 2, index);
                            },
                          )
                        ],
                      ),
                    );
                  }),
            )
          ],
        );
      },
    );
  }
}
